<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>编辑试题</title>
    <link rel="stylesheet" href="../../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../css/public.css" media="all">
    <style>
        .container { padding: 20px 40px; }
        .form-row { margin-bottom: 15px; display: flex; align-items: center; }
        .form-row label { width: 100px; font-weight: bold; }
        .w150 { width: 150px; }
        .textarea { width: 98%; }
        .highlight-box {
            background: #e7f6f6;
            padding: 20px;
            border-radius: 4px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div class="container">
    <h2 class="layui-text">编辑试题</h2>
    <form class="layui-form" id="editForm">
        <input type="hidden" name="questionId" id="questionId">

        <div class="form-row">
            <label>所属学科:</label>
            <input type="text" name="subject" placeholder="请输入学科" class="layui-input w150" id="subjectInput">
        </div>

        <div class="form-row">
            <label>所属章节:</label>
            <input type="text" name="section" placeholder="请输入章节" class="layui-input w150" id="sectionInput">
        </div>

        <div class="form-row">
            <label>难度等级:</label>
            <select name="level" class="w150" id="levelSelect">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
            </select>
        </div>

        <div class="form-row">
            <label>题目内容:</label>
            <textarea name="question" placeholder="请输入选择题题干" class="layui-textarea textarea" id="questionInput"></textarea>
        </div>

        <div class="form-row"><label>A</label><input type="text" name="answerA" placeholder="选项A" class="layui-input w150" id="aInput"></div>
        <div class="form-row"><label>B</label><input type="text" name="answerB" placeholder="选项B" class="layui-input w150" id="bInput"></div>
        <div class="form-row"><label>C</label><input type="text" name="answerC" placeholder="选项C" class="layui-input w150" id="cInput"></div>
        <div class="form-row"><label>D</label><input type="text" name="answerD" placeholder="选项D" class="layui-input w150" id="dInput"></div>

        <div class="form-row">
            <label>正确选项:</label>
            <select name="rightAnswer" class="w150" id="rightAnswerSelect">
                <option value="A">A</option>
                <option value="B">B</option>
                <option value="C">C</option>
                <option value="D">D</option>
            </select>
        </div>

        <div class="form-row">
            <label>分数:</label>
            <input type="number" name="score" class="layui-input w150" id="scoreInput">
        </div>

        <div class="form-row">
            <label>解析:</label>
            <textarea name="analysis" placeholder="答案解析" class="layui-textarea textarea" id="analysisInput"></textarea>
        </div>

        <button class="layui-btn" lay-submit lay-filter="submitEdit">保存修改</button>
    </form>
</div>

<script src="../../../lib/layui-v2.6.3/layui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    layui.use(['form', 'layer'], function(){
        const form = layui.form;
        const layer = layui.layer;
        const $ = layui.$;

        // 读取localStorage中的multiQuestion
        const localDataStr = localStorage.getItem('multiQuestion');
        if (!localDataStr) {
            layer.msg("未获取到题目信息！");
            return;
        }
        const q = JSON.parse(localDataStr);

        // 初始化表单字段
        $('#questionId').val(q.questionId || '');
        $('#subjectInput').val(q.subject || '');
        $('#sectionInput').val(q.section || '');
        $('#levelSelect').val(q.level || '1');
        $('#questionInput').val(q.question || '');
        $('#aInput').val(q.answerA || '');
        $('#bInput').val(q.answerB || '');
        $('#cInput').val(q.answerC || '');
        $('#dInput').val(q.answerD || '');
        $('#rightAnswerSelect').val(q.rightAnswer || 'A');
        $('#scoreInput').val(q.score || '');
        $('#analysisInput').val(q.analysis || '');

        form.render();

        // 提交表单处理
        form.on('submit(submitEdit)', function(data){
            const multiQuestion = {
                questionId: $('#questionId').val(),
                subject: $('#subjectInput').val(),
                section: $('#sectionInput').val(),
                level: $('#levelSelect').val(),
                question: $('#questionInput').val(),
                answerA: $('#aInput').val(),
                answerB: $('#bInput').val(),
                answerC: $('#cInput').val(),
                answerD: $('#dInput').val(),
                rightAnswer: $('#rightAnswerSelect').val(),
                score: $('#scoreInput').val(),
                analysis: $('#analysisInput').val()
            };

            axios.post('/editMultiQuestion', multiQuestion)
                .then(function(res){
                    if(res.data && res.data.code === 200){
                        layer.msg("修改成功！");
                        console.log(res.data);
                    } else {
                        layer.msg("修改失败：" + (res.data ? res.data.message : ''));
                    }
                })
                .catch(function(){
                    layer.msg("请求失败！");
                });

            return false;
        });
    });
</script>
</body>
</html>
